<!-- pages/my/my.vue -->
<template>
  <view class="profile-container">
    <!-- User Profile Card -->
    <view class="user-profile-card">
      <view class="profile-header">
        <view class="profile-content">
          <image class="avatar" :src="userInfo.avatar" mode="aspectFill"></image>
          <view class="user-info">
           <text class="username">{{userInfo.name}}</text>
            <text class="user-id">ID: {{userInfo.id}}</text>
          </view>
        </view>
      </view>
    </view>
    <!-- Menu List -->
    <view class="menu-list">
      <!-- Study Statistics -->
      <view class="menu-item" @tap="goToStatic">
        <view class="menu-icon" style="background-color: #E8F3E8;">
          <text class="icon">📊</text>
        </view>
        <text class="menu-text">学习统计</text>
        <text class="arrow">></text>
      </view>
      <!-- Partner Requests -->
      <view class="menu-item" @tap="goToRequestList">
        <view class="menu-icon" style="background-color: #FFE8E8;">
          <text class="icon">👥</text>
        </view>
        <text class="menu-text">搭子请求</text>
        <text class="arrow">></text>
      </view>
      <!-- Wrong Questions Collection -->
      <view class="menu-item" @tap="goToExam">
        <view class="menu-icon" style="background-color: #F5E6E8;">
          <text class="icon">📝</text>
        </view>
        <text class="menu-text">错题集</text>
        <text class="arrow">></text>
      </view>
      <!-- Study Plan -->
      <view class="menu-item" @tap="goToStudyPlan">
        <view class="menu-icon" style="background-color: #F5F0E6;">
          <text class="icon">📅</text>
        </view>
        <text class="menu-text">学习计划</text>
        <text class="arrow">></text>
      </view>
      <!-- Notes -->
      <view class="menu-item" @tap="goToNotes">
        <view class="menu-icon" style="background-color: #E6E8F5;">
          <text class="icon">📓</text>
        </view>
        <text class="menu-text">笔记本</text>
        <text class="arrow">></text>
      </view>
      <!-- Settings -->
      <view class="menu-item" @tap="goToSettings">
        <view class="menu-icon" style="background-color: #F0F0F0;">
          <text class="icon">⚙️</text>
        </view>
        <text class="menu-text">信息设置</text>
        <text class="arrow">></text>
      </view>
    </view>
    <!-- Bottom Navigation -->
    <view class="bottom-tab-bar">
      <view class="tab-item" 
            v-for="(item, index) in bottomNavItems" 
            :key="index"
            @tap="switchTab(item.url, index)">
        <image :src="currentTab === index ? item.activeIcon : item.icon" 
               mode="aspectFit" 
               class="tab-icon"></image>
        <text class="tab-text"
              :class="{ 'active': currentTab === index }">{{ item.text }}</text>
      </view>
    </view>
  </view>
</template>
<script setup>
import { ref,onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
// 当前选中的tab
const currentTab = ref(3) // "我的"页面是第四个tab，索引为3
// 底部导航数据
const bottomNavItems = ref([
  { 
    icon: '/static/icons/politics.png',
    activeIcon: '/static/icons/politics.png', 
    text: '首页',
    url: '/pages/index/index'
  },
  { 
    icon: '/static/icons/练习.png',
    activeIcon: '/static/icons/exam.png', 
    text: '练习',
    url: '/pages/practice/practice'
  },
  { 
    icon: '/static/icons/home1.png',
    activeIcon: '/static/icons/home1.png', 
    text: '社区',
    url: '/pages/community/index'
  },
  { 
    icon: '/static/icons/user.png',
    activeIcon: '/static/icons/user.png', 
    text: '我的',
    url: '/pages/my/my'
  }
])

const userInfo = ref({
  avatar: '',
  username: '',
  id: ''
})
// 页面跳转方法 - 修改后的方法
const switchTab = (url, index) => {
  // 更新当前选中的tab
  currentTab.value = index
  
  // 检查页面路径是否是tabBar页面
  const isTabPage = bottomNavItems.value.some(item => item.url === url)
  
  try {
    if (isTabPage) {
      // 如果是tabBar页面，使用switchTab
      uni.switchTab({
        url: url
      })
    } else {
      // 如果不是tabBar页面，使用navigateTo
      uni.navigateTo({
        url: url
      })
    }
  } catch (error) {
    console.error('页面跳转失败：', error)
    uni.showToast({
      title: '页面跳转失败',
      icon: 'none'
    })
  }
}
const goToRequestList = () => {
  uni.navigateTo({
    url: '/pages/my/request-list',
    fail: (err) => {
      console.error('页面跳转失败：', err)
      uni.showToast({
        title: '页面跳转失败，请检查路径',
        icon: 'none'
      })
    }
  })
}
const goToStatic = () => {
  uni.navigateTo({
    url: '/pages/my/static',
    fail: (err) => {
      console.error('页面跳转失败：', err)
      uni.showToast({
        title: '页面跳转失败，请检查路径',
        icon: 'none'
      })
    }
  })
}
const goToExam = () => {
  uni.navigateTo({
    url: '/pages/my/Errorset',
    fail: (err) => {
      console.error('页面跳转失败：', err)
      uni.showToast({
        title: '页面跳转失败，请检查路径',
        icon: 'none'
      })
    }
  })
}
// 添加其他页面跳转方法
const goToStudyPlan = () => {
  uni.navigateTo({
    url: '/pages/my/study-plan',
    fail: (err) => {
      console.error('页面跳转失败：', err)
      uni.showToast({
        title: '页面跳转失败，请检查路径',
        icon: 'none'
      })
    }
  })
}
const goToNotes = () => {
  uni.navigateTo({
    url: '/pages/my/notes',
    fail: (err) => {
      console.error('页面跳转失败：', err)
      uni.showToast({
        title: '页面跳转失败，请检查路径',
        icon: 'none'
      })
    }
  })
}
const goToSettings = () => {
  uni.navigateTo({
    url: '/pages/my/profile',
    fail: (err) => {
      console.error('页面跳转失败：', err)
      uni.showToast({
        title: '页面跳转失败，请检查路径',
        icon: 'none'
      })
    }
  })
}
// 页面加载时检查当前路由
onLoad(() => {
  const pages = getCurrentPages()
  const currentPage = pages[pages.length - 1]
  const currentRoute = currentPage.route
  
  // 更新选中的tab
  const tabIndex = bottomNavItems.value.findIndex(item => {
    const itemPath = item.url.slice(1) // 移除开头的'/'
    return currentRoute === itemPath
  })
  
  if (tabIndex !== -1) {
    currentTab.value = tabIndex
  }
})
const fetchUserInfo = async () => {
  try {
    const userId = 1 // 这里需要根据实际情况获取用户ID
    const response = await uni.request({
      url: `http://localhost:8080/api/user/${userId}`,
      method: 'GET'
    })
	console.log(response);
    if (response.statusCode === 200) {
      userInfo.value = response.data
    } else {
      console.error('获取用户信息失败', response)
    }
  } catch (error) {
    console.error('获取用户信息时发生错误', error)
  }
}

onMounted(() => {
  fetchUserInfo()
})
</script>
<style>
.profile-container {
  min-height: 100vh;
  background-color: #f7f7f7;
  padding-bottom: 120rpx;
}

.user-profile-card {
  background-color: #A8BF8F;
  padding: 40rpx;
  color: #fff;
}
  
.profile-header {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.profile-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.avatar {
  width: 150rpx;
  height: 150rpx;
  border-radius: 50%;
  margin-bottom: 20rpx;
  border: 4rpx solid rgba(255, 255, 255, 0.8);
}
  
.user-info {
  text-align: center;
  width: 100%;
}

.username {
  font-size: 36rpx;
  font-weight: bold;
  text-align: center;
  width: 100%;
  margin-bottom: 10rpx;
}

.user-id {
  font-size: 28rpx;
  opacity: 0.8;
}

.menu-list {
  background-color: #fff;
  margin-top: 20rpx;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.menu-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 30rpx;
}

.menu-text {
  flex: 1;
  font-size: 32rpx;
}

.arrow {
  color: #ccc;
}

.icon {
  font-size: 40rpx;
  margin-bottom: 6rpx;
}

/* 底部导航栏样式 */
.bottom-tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background-color: #ffffff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-top: 1rpx solid #eeeeee;
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 999;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10rpx 0;
  position: relative;
}

.tab-item:active {
  opacity: 0.8;
}

.tab-icon {
  width: 48rpx;
  height: 48rpx;
  margin-bottom: 6rpx;
}

.tab-text {
  font-size: 24rpx;
  color: #666666;
  line-height: 1.2;
}

.tab-text.active {
  color: #A8BF8F;
  font-weight: bold;
}

/* 适配iPhone底部安全区 */
@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
  .bottom-tab-bar {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* 暗黑模式适配 */
@media (prefers-color-scheme: dark) {
  .bottom-tab-bar {
    background-color: #1c1c1e;
    border-top-color: #2c2c2e;
  }
  
  .tab-text {
    color: #8e8e93;
  }
  
  .tab-text.active {
    color: #A8BF8F;
  }
  
  .menu-list {
    background-color: #1c1c1e;
  }
  
  .menu-item {
    border-bottom-color: #2c2c2e;
  }
  
  .menu-text {
    color: #ffffff;
  }
  
  .arrow {
    color: #8e8e93;
  }
}
</style>